import React, { useState, useEffect }  from 'react'
import { Form, Select, Input, Col, DatePicker, Table, Card, InputNumber  } from 'antd'
import { formLayout } from '@/utils/utils'
import SearchBox from '@/components/SearchBox'
import { fetchCoupons, fetchCouponClassify } from '@/services/dataCenter/cardData'
import moment from 'moment'
const {RangePicker} = DatePicker


const FormB = props => {
  const { form, counpClassify, couponSendTypes, couponTypes, couponStatuses, scenesList } = props
  const { getFieldDecorator } = form
  const [total, setTotalPage] = useState(null)
  const [counpList, setCounpList] = useState([])

  const dateFormat = 'YYYY-MM-DD'



  // 按钮处理
  const handleBtn = type => {

  }

  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }

  const [param, setParam] = useState({
    pageNo: 1,
    pageSize: 10,
    isFinished: 1,
  })
  useEffect(() => {
    _fetchCoupons(param)
  }, [])

  const _fetchCoupons = async (param) => {
    const res = await fetchCoupons(param)
    if (res.code == 0) {
      setCounpList(res.data)
      setTotalPage(res.total)
    }
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields((err, values) => {
      console.log('Received values of form: ', values)
      _fetchCoupons({
        ...param,
        ...values,
      })
    })
  }
  // 查询条件
  const getFields = () => {
    return(<>
      <Col span={8}>
        <Form.Item label="优惠券名称" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponName', {})
            (<Input />)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="优惠券分类" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponClassId', {})
            (<Select>
              {counpClassify && counpClassify.map(m => <Select.Option key={m.id} value={m.id}>{m.className}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="优惠券类型" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponType', {})
            (<Select>
              {couponTypes.map(m => <Select.Option key={m.value} value={m.value}>{m.label}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="发放类型" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('couponSendType', {})
            (<Select>
              {couponSendTypes.map(m => <Select.Option key={m.value} value={m.value}>{m.label}</Select.Option>)}
            </Select>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="优惠券面额" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator('minAmount', {defaultValue: 0})(<InputNumber min={0}/>)}
          <span> 至 </span>
          {getFieldDecorator('maxAmount', {defaultValue: 0})(<InputNumber min={0}/>)}
        </Form.Item>
      </Col>
      <Col span={8}>
        <Form.Item label="有效日期" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
          {getFieldDecorator(`dateTime`, {
            defaultValue: [moment(), moment()]
          })
            (<RangePicker format={dateFormat} />)}
        </Form.Item>
      </Col>
    </>)
  }
  const pagination = {
    total: parseInt(total),
    onChange (page) {
      _fetchCoupons({
        ...param,
        pageNo: page,
      })
    }
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      render: (v, r, i) => {
        return (<span>{i+1}</span>)
      }
    },
    {
      title: '优惠券名称',
      dataIndex: 'couponName',
      key: 'couponName'
    },
    {
      title: '面值',
      dataIndex: 'couponType',
      key: 'couponType',
      render: (v, r, i) => {
        if (r.couponType == 1) {
          return (<span>{r.denomination}</span>)
        } else {
          return (<span>{r.discountRate + '%'}</span>)
        }
      }
    },
    {
      title: '使用条件',
      dataIndex: 'limitPrice',
      key: 'limitPrice',
      render: (v, r, i) => {
        return (<span>满 {v} 可使用</span>)
      }
    },
    {
      title: '使用期限',
      dataIndex: 'effectiveTime',
      key: 'effectiveTime',
      render: (v, r, i) => {
        return (<span>{r.effectiveTime + '-' + r.expirationTime}</span>)
      }
    },
    {
      title: '发放总量',
      dataIndex: 'lssuedQty',
      key: 'lssuedQty'
    },
    {
      title: '每人限领',
      dataIndex: 'receiveLimit',
      key: 'receiveLimit'
    },
    {
      title: '已领取',
      dataIndex: 'receiveCount',
      key: 'receiveCount'
    },
    {
      title: '已使用',
      dataIndex: 'useCount',
      key: 'useCount'
    },
  ]
  return (<Form layout={formLayout}>
    <Card>
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
    </Card>
    <Card style={{marginTop: '10px'}}>
      <Table rowKey={record => record.id} pagination={pagination} size="small" columns={columns} dataSource={counpList}/>
    </Card>
  </Form>)
}


export default Form.create({})(FormB)
